<template>
	<view class="home">
		<view class="card-bottom" style="margin-top: -92upx;">

			<view class="scroll-wrapper">
				<view v-if="activeTab == 0">
					<view class="margin-bottom" v-for="(item, index) in cardList" :key="index">
						<y-DiaryItem :obj="item" />
					</view>
				</view>
			</view>
			<!-- 右下角按钮 -->
			<y-Fab :bottom="140" :right="40" :btnList="fabList" @click="handleFab" />
		</view>
	</view>
</template>

<script>
	var that;
	import {
		content_list
	} from '../../api/ap_content.js'
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				startNum: 0,
				activeTab: 0,
				// tab的名称
				tabList: [{
						title: ''
					}

				],
				cardList: [],
				rightList: [],
				loadMoreStatus: 1, //0加载前，1加载中，2没有更多了
				//fab的设置
				fabList: [{
					bgColor: '#E9A06F',
					text: '动态',
					fontSize: 28,
					color: '#fff'
				}]
			};
		},
		onShow() {
			this.contentList()


		},
		onLoad() {

		},
		onReachBottom() {

		},
		methods: {
			contentList() {
				this.cardList = []
				content_list({}).then(res => {
					this.cardList = res.data
				})
			},
			getNotesList() {

			},

			toDetails(id) {

				uni.navigateTo({
					url: '/pages/squareDetail/squareDetail?id=' + id
				})
			},
			toOther(id) {
				uni.navigateTo({
					url: '../mine/other/other?id=' + id
				})
			},
			loadData(type) {

			},
			//下拉刷新
			onPulldownReresh() {
				this.getFoodList()
			},
			handleTab(index) {
				this.activeTab = index;
				if (index === 0) {
					food_list({}).then(res => {
						console.log(res)
						this.cardList = res.data
					})
				} else {
					note_list({}).then(res => {
						console.log(res)
						this.rightList = res.data
					})
				}
			},
			//点击右下角tab按钮
			handleFab(e) {
				let index = e.index;
				if (index == 0) {
					uni.navigateTo({
						url: '../publish/publish'
					});

				} else {
					uni.navigateTo({
						url: '../publish-note/publish-note'
					});
				}

			}
		}
	};
</script>

<style lang="less" scoped>
	.home {
		padding-top: 120rpx;

		.top-barrage {
			width: 100%;
			height: 320rpx;
			overflow: hidden;
		}

		.card-bottom {
			width: 100%;

			.top-tab {
				display: flex;
				height: 120rpx;
				width: 100%;
				z-index: 100;
				background-color: #ffffff;

				.tab-item {
					flex: 1;
					color: #999;
					border-bottom: 4rpx solid #ececec;
				}

				.active {
					color: var(--mainColor);
					border-bottom: 4rpx solid var(--mainColor);
				}
			}
		}
	}
</style>